<!--
 * @Description: 插槽
 * @Author: zzj
 * @Date: 2021-10-11 11:31:43
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-11 16:42:31
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>插槽</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
	<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
</head>

<body>
	<div id="app">
		<article-page>
			<h3 slot="head">文章头部</h3>
			<h3 slot="con">文章页面</h3>
			<h3 slot="foot">文章底部</h3>
		</article-page>	
	</div>

	<script>
		let articlePage = {
			template:`
				<div>
					<div class="header">
						<slot name="head"></slot>
					</div>
					<div class="content">
						<slot name="con"></slot>	
					</div>
					<div class="footer">
						<slot name="foot"></slot>
					</div>
				</div>
			`
		}
		Vue.component("article-page", articlePage)

		new Vue({
			el: "#app",
			data: {
				articles: [
					{ id: 1, title: "xxx", content: "xxxxxx" },
					{ id: 2, title: "ccc", content: "cccccc" },
					{ id: 3, title: "vvv", content: "vvvvv" }
				]
			}
		})
	</script>
</body>

</html>